<template>
  <div class="br-layout-relative" style="min-width: 750px;">
    <div class="br-layout-absolute br-border-bottom" style=" top:0;height: 30px;line-height: 30px;">
      <span class="br-text-over" style="margin-left: 10px;" :title="directoryName">{{directoryName}}</span>
    </div>
    <div class="br-layout-absolute" style="top:31px;left: 10px; right:10px;height: 40px;line-height: 40px;">
      <div class="br-table-top">
        <div class="br-table-top-item" @click="add">
          <div class="icon"><i class="el-icon-plus"></i></div>
          <div class="text">新建转换</div>
        </div>
        <div :class="multipleSelection&&multipleSelection.length?'br-table-top-item':'br-table-top-item-disabled'"
          @click="deleteTrans">
          <div class="icon"><i class="iconfont icon-shanchu"></i></div>
          <div class="text">刪除</div>
        </div>
      </div>
    </div>
    <div class="br-layout-absolute" style="top:71px;left: 10px; right:10px;">
      <el-table :data="tableData" v-loading="loading" fit @selection-change="handleSelectionChange" @cell-mouse-leave="mouseLeave"
        @cell-mouse-enter="mouseEnter">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="name" label="转换编号" min-width="180">
        </el-table-column>
        <el-table-column prop="transName" label="转换名称" min-width="180">
          <template slot-scope="scope">
            <span class="br-text-over" :title="scope.row.transName" v-if="!scope.row.edit">{{scope.row.transName}}</span>
            <el-input v-focus @blur="rename(scope.row)" size="mini" v-model="scope.row.transName" v-if="scope.row.edit" />
          </template>
        </el-table-column>
        <el-table-column prop="transName" label="状态" min-width="180">
          <template slot-scope="scope">
            <span>{{scope.row.status===0?'待执行':'运行中'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateBy" label="修改人" width="180">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <span class="br-table-tools">
              <span class="text" @click="toConfig(scope.row)">配置流程</span>
              <span class="text" @click="toEdit(scope.row)">重命名</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {
    getList,
    add,
    rename,
    deleteTrans,
  } from '@/api/trans/trans'
  import {
    mapGetters
  } from 'vuex'
  export default {
    components: {
    },
    data() {
      return {
        tableData: [],
        row: null,
        visible: false,
        multipleSelection: [],
        transName: "",
        searchword: "",
        loading: false,
        page: 0,
        limit: 10,
        total: 0,
      }
    },
    computed: {
      ...mapGetters(['sidebar', "directory"]),
      isHeight() {
        return this.sidebar.height;
      },
      directoryId() {
        return this.directory.id;
      },
      directoryName() {
        return this.directory.name;
      },
    },
    watch: {
      directoryId() {
        this.getList();
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      mouseEnter(row, column, cell, event) {
        this.row = row;
      },
      mouseLeave() {
        this.row = null;
      },
      getTransNames() {
        let transNames = [];
        for (let i = 0; i < this.multipleSelection.length; i++) {
          transNames.push(this.multipleSelection[i].name)
        }
        return transNames;
      },
      add() {
        if (!this.directoryId) {
          this.$notify({
            title: '提示',
            message: "请选择一个目录",
            type: 'info',
            dangerouslyUseHTMLString: true
          });
          return;
        }
        add(this.directoryId).then((res) => {
          if (res.data.status === 200) {
            let row = res.data.data;
            row.edit = true;
            this.tableData.splice(0, 0, row);
          }
        })
      },
      toEdit(row) {
        row.edit = true;
      },
      rename(row) {
        if (!row.transName) {
          this.$notify({
            title: '提示',
            message: "转换名称必填项",
            type: 'info',
            dangerouslyUseHTMLString: true
          });
          return;
        }
        let parmas = {
          id: row.id,
          directoryId: row.pid,
          name: row.transName,
        };
        rename(parmas).then((res) => {
          if (res.data.status == 200) {
            row.edit = false;
            row = res.data.data;
          }
        })
      },
      deleteTrans() {
        this.$confirm('是否删除转换，请确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(_ => {
            let parmas = {
              transNames: this.getTransNames(),
              directoryId: this.directoryId
            };
            deleteTrans(parmas).then((res) => {
              if (res.data.status === 200) {
                this.getList();
                this.$notify({
                  title: '提示',
                  message: res.data.data,
                  type: 'success',
                  dangerouslyUseHTMLString: true
                });
              }
            })
          })
          .catch(_ => {});
      },
      toConfig(row) {
        this.$router.push({
          path: "/design/transFlow",
          query: {
            directoryId: this.directoryId,
            tranId: row.name
          }
        });
      },
      getList() {
        if (!this.directoryId)
          return;
        let params = {
          directoryId: this.directoryId,
        }
        this.loading = true;
        getList(params).then((res) => {
          this.loading = false;
          if (res.data.status == 200) {
            this.tableData = res.data.data;
          }
        })
      }
    },
    created() {},
    mounted() {
      this.getList();
    }
  };
</script>

<style lang="less" scoped>
</style>
